var contentNode = document.getElementById('content');

const TaskRow = props => {
    console.log(props.task);
    return React.createElement(
        'tr',
        null,
        React.createElement(
            'td',
            null,
            props.task.id
        ),
        React.createElement(
            'td',
            null,
            props.task.companyName
        ),
        React.createElement(
            'td',
            null,
            props.task.category
        ),
        React.createElement(
            'td',
            null,
            props.task.createAt.toDateString()
        )
    );
};

function TaskTable(props) {
    const TaskRows = props.tasks.map(task => React.createElement(TaskRow, { key: task.id, task: task }));
    return React.createElement(
        'table',
        null,
        React.createElement(
            'thead',
            null,
            React.createElement(
                'tr',
                null,
                React.createElement(
                    'td',
                    null,
                    'Id'
                ),
                React.createElement(
                    'td',
                    null,
                    'Name'
                ),
                React.createElement(
                    'td',
                    null,
                    'category'
                ),
                React.createElement(
                    'td',
                    null,
                    'Create'
                )
            )
        ),
        React.createElement(
            'tbody',
            null,
            TaskRows
        )
    );
}

class TaskReview extends React.Component {
    constructor() {
        super();
        this.state = { tasks: [] };
    }

    componentDidMount() {
        this.loadData();
    }

    loadData() {
        fetch('/api/tasks').then(response => {
            return response.json();
        }).then(data => {
            console.log(data);
            data.records.forEach(task => {
                task.createAt = new Date(task.createAt);
            });
            this.setState({ tasks: data.records });
        }).catch(err => {
            console.log('Load data has an error:' + err);
        });
    }

    render() {
        return React.createElement(
            'div',
            null,
            React.createElement(TaskTable, { tasks: this.state.tasks })
        );
    }
}

ReactDOM.render(React.createElement(TaskReview, null), contentNode);